var page = 1;

function loadXMLDoc() {
	var xmlhttp;
	if (window.XMLHttpRequest)
	{
		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();
	}
	else
	{
		// IE6, IE5 浏览器执行代码
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			var json = JSON.parse(xmlhttp.responseText);
			//对数组进行循环
			for (var i = 0; i < json.shop.length; i++) {
				// console.log(json.shop[i])
				//创建html结构
				var img = document.createElement('img');
				img.src = json.shop[i].pic;

				var h3 = document.createElement('h3');
				h3.innerHTML = json.shop[i].title;

				var p = document.createElement('p');
				p.innerHTML = json.shop[i].desc;

				var p2 = document.createElement('p');
				p2.innerHTML = "￥";

				var span = document.createElement('span');
				span.innerHTML = json.shop[i].price;

				p2.appendChild(span);
				var div = document.createElement('div');

				div.appendChild(img);

				div.appendChild(h3);

				div.appendChild(p);

				div.appendChild(p2);

				console.log(div);
				//把所有的div追加到#list里面
				document.querySelector("#list").appendChild(div)
			}
		}
	}
	xmlhttp.open("GET", page + ".json",true);
	xmlhttp.send();
}

loadXMLDoc()


document.querySelector("#btn"),addEventListener('click',function(){
	if (page >= 3) {
		page = 1;
	}else{
		page++;
	}
	//先清空
	document.querySelector("#list").innerHTML = '';
	//在取数据放到 #list 里面
	loadXMLDoc();
})